<template>
  <view class="flex-1">
    <view class="px-5">
      <view class="bg-white rounded-[15rpx] mt-5">
        <view class="py-[30rpx] px-3">
          <view class="text-main font-medium text-base leading-[46rpx]">
            凤之翼公务航空再次诚挚感谢您的支持，我们非常重视您的意见反馈，请将遇到的问题告诉我们
          </view>
          <view class="mt-4 mb-[68rpx]">
            <up-textarea
              height="100"
              v-model="form.feedback_note"
              placeholder="有什么想对我们说的呢?"
              border="bottom"
              :show-confirm-bar="false"
            ></up-textarea>
          </view>
          <!-- <view
            class="w-20 h-20 bg-[#FBFBFB] rounded-[15rpx] flex justify-center items-center mt-5"
            style="2rpx solid #EEEEEE"
          >
            <up-icon name="plus-circle" size="30" color="#DEDEDE"></up-icon>
          </view> -->
          <up-upload
            :fileList="fileList1"
            @afterRead="afterRead"
            @delete="deletePic"
            name="1"
            :deletable="true"
            :maxCount="10"
            uploadIcon="plus-circle"
            imageMode="aspectFill"
            uploadIconColor="#DEDEDE"
          >
          </up-upload>
        </view>
      </view>
      <view class="bg-white rounded-[15rpx] mt-5">
        <view class="py-[30rpx] px-3 pb-6">
          <view class="text-main font-medium text-xl"> 联系方式（选填） </view>
          <view class="mt-4">
            <up-input
              placeholder="留下您的联系方式"
              border="none"
              v-model="form.phone"
            ></up-input>
          </view>
        </view>
      </view>
    </view>
    <view class="fixed w-full bottom-0 bg-white px-5 pt-[30rpx] pb-5">
      <view
        @click="submit"
        class="bg-theme rounded w-full font-medium text-lg text-white h-[90rpx] leading-[90rpx] text-center"
      >
        提交反馈
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { saveFeedback_api } from "@/api/user.js";
import { upload_file_api } from "@/api/public.js";
import { ref, reactive } from "vue";
const value5 = ref("");
const form = reactive({
  feedback_note: "",
  phone: "",
});

const fileList1 = ref([]);
const submit = () => {
  if (!form.feedback_note)
    return uni.showToast({ title: "请输入意见反馈", icon: "none" });
  if (form.phone && !uni.$u.test.mobile(form.phone))
    return uni.showToast({ title: "请输入正确的手机号", icon: "none" });
  uni.showLoading();
  saveFeedback_api({
    ...form,
    images: fileList1.value.map((e) => e.fullurl),
  }).then(() => {
    uni.showModal({
      title: "温馨提示",
      content: "提交成功",
      showCancel: false,
      success: () => {
        uni.navigateBack();
      },
    });
  });
};
// 删除图片
const deletePic = (event) => {
  fileList1.value.splice(event.index, 1);
};

// 新增图片
const afterRead = async (event) => {
  // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
  let lists = [].concat(event.file);
  let fileListLen = fileList1.value.length;
  lists.map((item) => {
    fileList1.value.push({
      ...item,
      status: "uploading",
      message: "上传中",
    });
  });
  for (let i = 0; i < lists.length; i++) {
    const result = await upload_file_api({
      filePath: lists[i].url,
      name: "file",
    });
    console.log(result, "result");
    let item = fileList1.value[fileListLen];
    fileList1.value.splice(fileListLen, 1, {
      ...item,
      status: "success",
      message: "",
      url: result.data.fullurl,
      fullurl: result.data.url,
    });
    fileListLen++;
  }
};
</script>

<style lang="scss" scoped>
:deep(.u-border-bottom) {
  border: none !important;
}
:deep(.u-textarea) {
  padding: 0 !important;
}
// :deep(.u-upload__wrap__preview__image) {
//   width: 80rpx !important;
//   height: 80rpx !important;
// }
// :deep(.u-upload__deletable){
//   position: relative !important;
//   z-index: 999 !important;
// }
</style>
